import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15

ApplicationWindow {
    id: root
    visible: true
    title: "Qt Charts 示例"
    
    // 鸿蒙PC窗口标志：参考QtAlarmClock项目的适配方式
    // 启用最大化、最小化、全屏、关闭按钮（与ApplicationWindow默认配置一致）
    flags: Qt.Window | 
           Qt.WindowFullscreenButtonHint |
           Qt.WindowTitleHint | 
           Qt.WindowSystemMenuHint | 
           Qt.WindowMinMaxButtonsHint | 
           Qt.WindowCloseButtonHint
    
    // 方案一：启用高DPI缩放后，Qt会自动处理缩放
    // 直接设置较大的窗口大小，确保在PC/平板上显示足够大
    width: Math.max(Screen.width * 0.8, 1400)  // 至少1400逻辑像素
    height: Math.max(Screen.height * 0.8, 900)  // 至少900逻辑像素
    
    // 设置最小窗口大小（确保可以调整大小）
    minimumWidth: 800
    minimumHeight: 600
    
    // 缩放因子：根据窗口宽度简单计算
    readonly property real scaleFactor: width > 1500 ? 2.0 : 1.5
    
    // 图表数据：12个图表
    readonly property var chartList: [
        { title: "实时动态曲线", description: "DynamicChart", source: "DynamicChart.qml" },
        { title: "动态曲线X", description: "DynamicChartX", source: "DynamicChartX.qml" },
        { title: "面积图", description: "AreaChart", source: "AreaChart.qml" },
        { title: "日期时间图", description: "DateTimeChart", source: "DateTimeChart.qml" },
        { title: "折线图", description: "LineChart", source: "LineChart.qml" },
        { title: "堆叠柱状图", description: "StackedBarChart", source: "StackedBarChart.qml" },
        { title: "饼图", description: "PieChart", source: "PieChart.qml" },
        { title: "柱状图", description: "BarChart", source: "BarChart.qml" },
        { title: "散点图", description: "ScatterChart", source: "ScatterChart.qml" },
        { title: "雷达图", description: "RadarChart", source: "RadarChart.qml" },
        { title: "热力图", description: "HeatMapChart", source: "HeatMapChart.qml" }
    ]
    
    
    Rectangle {
        anchors.fill: parent
        color: "#F5F5F5"
        
        ColumnLayout {
            anchors.fill: parent
            anchors.margins: 12 * scaleFactor
            spacing: 12 * scaleFactor
            
            // 标题栏
            RowLayout {
                Layout.fillWidth: true
                Layout.preferredHeight: 50 * scaleFactor
                spacing: 12 * scaleFactor
                
                Text {
                    Layout.fillWidth: true
                    text: "Qt Charts 示例"
                    font.pixelSize: 24 * scaleFactor
                    font.bold: true
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    color: "#333333"
                }
                
                Text {
                    Layout.preferredWidth: 150 * scaleFactor
                    text: "共 " + chartList.length + " 个图表"
                    font.pixelSize: 14 * scaleFactor
                    color: "#666666"
                    horizontalAlignment: Text.AlignRight
                    verticalAlignment: Text.AlignVCenter
                }
            }
            
            // 图表显示区域
            ScrollView {
                Layout.fillWidth: true
                Layout.fillHeight: true
                
                GridLayout {
                    id: chartGrid
                    width: root.width - 24 * scaleFactor
                    columns: 3
                    columnSpacing: 12 * scaleFactor
                    rowSpacing: 12 * scaleFactor
                    
                    Repeater {
                        model: chartList
                        
                        Rectangle {
                            Layout.preferredWidth: (root.width - 48 * scaleFactor) / 3
                            Layout.preferredHeight: 300 * scaleFactor
                            color: "#FFFFFF"
                            border.color: "#CCCCCC"
                            border.width: 1
                            radius: 4
                            clip: true
                            
                            Column {
                                anchors.fill: parent
                                anchors.margins: 8 * scaleFactor
                                spacing: 4 * scaleFactor
                                
                                Text {
                                    width: parent.width
                                    text: modelData.title
                                    font.pixelSize: 14 * scaleFactor
                                    font.bold: true
                                    color: "#333333"
                                    horizontalAlignment: Text.AlignHCenter
                                    elide: Text.ElideRight
                                }
                                
                                // 使用 Canvas 绘制图表
                                Canvas {
                                    id: chartCanvas
                                    width: parent.width
                                    height: parent.height - (14 * scaleFactor + 4 * scaleFactor)  // 减去标题高度和spacing
                                    clip: true  // 确保绘制不超出边界
                                    
                                    property var chartData: {
                                        if (!modelData) return []
                                        var description = modelData.description || ""
                                        var seed = modelData.title || description || "default"
                                        return generateChartData(description, seed)
                                    }
                                    property string chartType: modelData ? getChartType(modelData.description || "") : "line"
                                    property var dataPoints: []  // 用于动态图表
                                    property int maxPoints: 30   // 动态图表最大点数
                                    
                                    function getChartType(description) {
                                        // 安全检查
                                        if (!description || typeof description !== "string") {
                                            return "line"
                                        }
                                        
                                        // 按优先级顺序检查，确保精确匹配
                                        if (description.indexOf("DynamicChart") >= 0 || description.indexOf("动态曲线") >= 0) return "dynamic"
                                        if (description.indexOf("PieChart") >= 0 || description.indexOf("饼图") >= 0) return "pie"
                                        if (description.indexOf("ScatterChart") >= 0 || description.indexOf("散点图") >= 0) return "scatter"
                                        if (description.indexOf("AreaChart") >= 0 || description.indexOf("面积图") >= 0) return "area"
                                        if (description.indexOf("RadarChart") >= 0 || description.indexOf("雷达图") >= 0) return "radar"
                                        if (description.indexOf("HeatMapChart") >= 0 || description.indexOf("热力图") >= 0) return "heatmap"
                                        if (description.indexOf("StackedBarChart") >= 0 || description.indexOf("堆叠柱状图") >= 0) return "bar"
                                        if (description.indexOf("BarChart") >= 0 || description.indexOf("柱状图") >= 0) return "bar"
                                        if (description.indexOf("DateTimeChart") >= 0 || description.indexOf("日期时间图") >= 0) return "line"
                                        if (description.indexOf("LineChart") >= 0 || description.indexOf("折线图") >= 0) return "line"
                                        return "line" // 默认折线图
                                    }
                                    
                                    function generateChartData(type, seed) {
                                        // 安全检查
                                        if (!type) type = ""
                                        if (!seed || typeof seed !== "string") {
                                            seed = type || "default"
                                        }
                                        
                                        // 计算种子值
                                        var seedValue = 12345  // 默认种子值
                                        if (seed && seed.length > 0) {
                                            for (var i = 0; i < seed.length; i++) {
                                                var code = seed.charCodeAt(i)
                                                if (isFinite(code)) {
                                                    seedValue += code
                                                }
                                            }
                                        }
                                        
                                        // 简单的伪随机数生成函数（不使用内部函数定义）
                                        var data = []
                                        var chartTypeLocal = "line"  // 默认值
                                        if (type && typeof type === "string") {
                                            chartTypeLocal = getChartType(type)
                                        }
                                        
                                        if (chartTypeLocal === "pie") {
                                            // 饼图：5个数据点
                                            for (var i = 0; i < 5; i++) {
                                                seedValue = (seedValue * 9301 + 49297) % 233280
                                                data.push((seedValue / 233280) * 100)
                                            }
                                        } else if (chartTypeLocal === "scatter") {
                                            // 散点图：20个数据点，X和Y都是随机
                                            for (var i = 0; i < 20; i++) {
                                                seedValue = (seedValue * 9301 + 49297) % 233280
                                                var x = (seedValue / 233280) * 100
                                                seedValue = (seedValue * 9301 + 49297) % 233280
                                                var y = (seedValue / 233280) * 100
                                                data.push({x: x, y: y})
                                            }
                                        } else if (chartTypeLocal === "line" || chartTypeLocal === "area") {
                                            for (var i = 0; i < 5; i++) {
                                                seedValue = (seedValue * 9301 + 49297) % 233280
                                                var yv = (seedValue / 233280) * 100
                                                if (yv < 0) yv = 0
                                                if (yv > 100) yv = 100
                                                data.push({x: i * 20, y: yv})
                                            }
                                        } else if (chartTypeLocal === "bar") {
                                            for (var i = 0; i < 5; i++) {
                                                seedValue = (seedValue * 9301 + 49297) % 233280
                                                var bv = (seedValue / 233280) * 100
                                                if (bv < 0) bv = 0
                                                if (bv > 100) bv = 100
                                                data.push(bv)
                                            }
                                        } else if (chartTypeLocal === "radar") {
                                            for (var i = 0; i < 6; i++) {
                                                seedValue = (seedValue * 9301 + 49297) % 233280
                                                var rv = (seedValue / 233280) * 100
                                                if (rv < 0) rv = 0
                                                if (rv > 100) rv = 100
                                                data.push({x: i * 60, y: rv})
                                            }
                                        } else if (chartTypeLocal === "heatmap") {
                                            for (var i = 0; i < 15; i++) {
                                                seedValue = (seedValue * 9301 + 49297) % 233280
                                                var hv = (seedValue / 233280) * 100
                                                if (hv < 0) hv = 0
                                                if (hv > 100) hv = 100
                                                data.push(hv)
                                            }
                                        } else {
                                            for (var i = 0; i < 10; i++) {
                                                seedValue = (seedValue * 9301 + 49297) % 233280
                                                var dv = (seedValue / 233280) * 100
                                                if (dv < 0) dv = 0
                                                if (dv > 100) dv = 100
                                                data.push(dv)
                                            }
                                        }
                                        return data
                                    }
                                    
                                    onPaint: {
                                        // 安全检查：确保chartData已初始化且有效
                                        if (!chartData || chartData.length === 0) {
                                            return
                                        }
                                        
                                        var ctx = getContext("2d")
                                        if (!ctx) return
                                        
                                        var width = chartCanvas.width
                                        var height = chartCanvas.height
                                        
                                        // 安全检查：确保width和height有效
                                        if (!width || !height || width <= 0 || height <= 0 || !isFinite(width) || !isFinite(height)) {
                                            return
                                        }
                                        
                                        // 完全清空画布
                                        ctx.clearRect(0, 0, width, height)
                                        
                                        // 绘制背景
                                        ctx.fillStyle = "#F9F9F9"
                                        ctx.fillRect(0, 0, width, height)
                                        
                                        // 根据图表类型绘制
                                        if (chartType === "pie") {
                                            drawPieChart(ctx, width, height)
                                        } else if (chartType === "bar") {
                                            drawBarChart(ctx, width, height)
                                        } else if (chartType === "scatter") {
                                            drawScatterChart(ctx, width, height)
                                        } else if (chartType === "area") {
                                            drawAreaChart(ctx, width, height)
                                        } else if (chartType === "radar") {
                                            drawRadarChart(ctx, width, height)
                                        } else if (chartType === "heatmap") {
                                            drawHeatMapChart(ctx, width, height)
                                        } else if (chartType === "dynamic") {
                                            drawDynamicChart(ctx, width, height)
                                        } else {
                                            drawLineChart(ctx, width, height)
                                        }
                                    }
                                    
                                    function drawLineChart(ctx, width, height) {
                                        // 绘制网格线
                                        ctx.strokeStyle = "#E0E0E0"
                                        ctx.lineWidth = 1
                                        for (var i = 0; i <= 5; i++) {
                                            var y = height * i / 5
                                            ctx.beginPath()
                                            ctx.moveTo(0, y)
                                            ctx.lineTo(width, y)
                                            ctx.stroke()
                                        }
                                        
                                        if (!chartData || chartData.length === 0) return
                                        
                                        // X轴范围：0-100，Y轴范围：0-100
                                        // 增加padding以留出坐标轴标签空间
                                        var padding = 20
                                        var plotWidth = width - padding * 2
                                        var plotHeight = height - padding * 2
                                        
                                        // 计算所有点的坐标
                                        var points = []
                                        for (var i = 0; i < chartData.length; i++) {
                                            var point = chartData[i]
                                            if (!point || typeof point !== "object") continue
                                            if (typeof point.x === "undefined" || typeof point.y === "undefined") continue
                                            points.push({
                                                x: padding + (point.x / 100) * plotWidth,
                                                y: padding + plotHeight - (point.y / 100) * plotHeight
                                            })
                                        }
                                        if (points.length === 0) return
                                        
                                        // 绘制折线（直接连接点，不使用平滑曲线）
                                        ctx.strokeStyle = "#2196F3"
                                        ctx.lineWidth = 2
                                        ctx.beginPath()
                                        
                                        if (points.length > 0) {
                                            ctx.moveTo(points[0].x, points[0].y)
                                            
                                            // 直接连接各个点，形成折线
                                            for (var i = 1; i < points.length; i++) {
                                                ctx.lineTo(points[i].x, points[i].y)
                                            }
                                        }
                                        ctx.stroke()
                                        
                                        // 绘制散点（和原实现一样，折线图也有散点）
                                        ctx.fillStyle = "#2196F3"
                                        for (var i = 0; i < points.length; i++) {
                                            ctx.beginPath()
                                            ctx.arc(points[i].x, points[i].y, 4, 0, 2 * Math.PI)
                                            ctx.fill()
                                        }
                                        
                                        // 绘制坐标轴
                                        drawAxes(ctx, width, height, padding, plotWidth, plotHeight, "line")
                                    }
                                    
                                    function drawAxes(ctx, width, height, padding, plotWidth, plotHeight, chartType) {
                                        // 绘制坐标轴
                                        ctx.strokeStyle = "#666666"
                                        ctx.lineWidth = 2
                                        
                                        // X轴
                                        ctx.beginPath()
                                        ctx.moveTo(padding, padding + plotHeight)
                                        ctx.lineTo(padding + plotWidth, padding + plotHeight)
                                        ctx.stroke()
                                        
                                        // Y轴
                                        ctx.beginPath()
                                        ctx.moveTo(padding, padding)
                                        ctx.lineTo(padding, padding + plotHeight)
                                        ctx.stroke()
                                        
                                        // X轴标签
                                        ctx.fillStyle = "#666666"
                                        ctx.font = "10px sans-serif"
                                        ctx.textAlign = "center"
                                        ctx.textBaseline = "top"
                                        for (var i = 0; i <= 5; i++) {
                                            var x = padding + (plotWidth * i / 5)
                                            var label = Math.round(i * 20)
                                            ctx.fillText(label.toString(), x, padding + plotHeight + 5)
                                        }
                                        
                                        // Y轴标签
                                        ctx.textAlign = "right"
                                        ctx.textBaseline = "middle"
                                        for (var i = 0; i <= 5; i++) {
                                            var y = padding + plotHeight - (plotHeight * i / 5)
                                            var label = Math.round(i * 20)
                                            ctx.fillText(label.toString(), padding - 5, y)
                                        }
                                        
                                        // 图例（仅对折线图、面积图等）
                                        if (chartType === "line" || chartType === "area" || chartType === "dynamic") {
                                            ctx.fillStyle = "#2196F3"
                                            ctx.fillRect(padding + plotWidth - 60, padding, 10, 10)
                                            ctx.fillStyle = "#666666"
                                            ctx.font = "10px sans-serif"
                                            ctx.textAlign = "left"
                                            ctx.textBaseline = "middle"
                                            ctx.fillText("Line", padding + plotWidth - 45, padding + 5)
                                        }
                                    }
                                    
                                    function drawPieChart(ctx, width, height) {
                                        var centerX = width / 2
                                        var centerY = height / 2
                                        var radius = Math.min(width, height) / 2 - 30
                                        
                                        if (!chartData || chartData.length === 0) return
                                        
                                        var total = 0
                                        for (var i = 0; i < chartData.length; i++) {
                                            var value = chartData[i]
                                            if (typeof value === "number") {
                                                total += value
                                            }
                                        }
                                        if (total === 0) return
                                        
                                        var colors = ["#2196F3", "#4CAF50", "#FF9800", "#F44336", "#9C27B0"]
                                        var startAngle = -Math.PI / 2
                                        
                                        for (var i = 0; i < chartData.length; i++) {
                                            var value = chartData[i]
                                            if (typeof value !== "number") continue
                                            var sliceAngle = (value / total) * 2 * Math.PI
                                            var midAngle = startAngle + sliceAngle / 2
                                            
                                            // 第一个slice突出显示（exploded）
                                            var offsetRadius = (i === 0) ? radius + 10 : radius
                                            var offsetX = (i === 0) ? Math.cos(midAngle) * 10 : 0
                                            var offsetY = (i === 0) ? Math.sin(midAngle) * 10 : 0
                                            
                                            ctx.fillStyle = colors[i % colors.length]
                                            ctx.beginPath()
                                            ctx.moveTo(centerX + offsetX, centerY + offsetY)
                                            ctx.arc(centerX + offsetX, centerY + offsetY, offsetRadius, startAngle, startAngle + sliceAngle)
                                            ctx.closePath()
                                            ctx.fill()
                                            
                                            // 第一个slice显示标签
                                            if (i === 0) {
                                                var labelX = centerX + offsetX + Math.cos(midAngle) * (offsetRadius + 15)
                                                var labelY = centerY + offsetY + Math.sin(midAngle) * (offsetRadius + 15)
                                                ctx.fillStyle = "#333333"
                                                ctx.font = "12px sans-serif"
                                                ctx.textAlign = "center"
                                                ctx.textBaseline = "middle"
                                                ctx.fillText("P" + i, labelX, labelY)
                                            }
                                            
                                            startAngle += sliceAngle
                                        }
                                    }
                                    
                                    function drawBarChart(ctx, width, height) {
                                        // 绘制网格线
                                        ctx.strokeStyle = "#E0E0E0"
                                        ctx.lineWidth = 1
                                        for (var i = 0; i <= 5; i++) {
                                            var y = height * i / 5
                                            ctx.beginPath()
                                            ctx.moveTo(0, y)
                                            ctx.lineTo(width, y)
                                            ctx.stroke()
                                        }
                                        
                                        if (!chartData || chartData.length === 0) return
                                        
                                        // Y轴范围：0-100
                                        var padding = 20
                                        var plotWidth = width - padding * 2
                                        var plotHeight = height - padding * 2
                                        var maxValue = 100
                                        
                                        var barWidth = plotWidth / chartData.length - 5
                                        var barSpacing = 5
                                        
                                        ctx.fillStyle = "#2196F3"
                                        for (var i = 0; i < chartData.length; i++) {
                                            var value = chartData[i]
                                            if (typeof value !== "number") continue
                                            var barHeight = (value / maxValue) * plotHeight
                                            var x = padding + i * (barWidth + barSpacing)
                                            var y = padding + plotHeight - barHeight
                                            
                                            ctx.fillRect(x, y, barWidth, barHeight)
                                        }
                                        
                                        // 绘制坐标轴
                                        drawAxes(ctx, width, height, padding, plotWidth, plotHeight, "bar")
                                    }
                                    
                                    function drawScatterChart(ctx, width, height) {
                                        // 绘制网格线
                                        ctx.strokeStyle = "#E0E0E0"
                                        ctx.lineWidth = 1
                                        for (var i = 0; i <= 5; i++) {
                                            var y = height * i / 5
                                            ctx.beginPath()
                                            ctx.moveTo(0, y)
                                            ctx.lineTo(width, y)
                                            ctx.stroke()
                                        }
                                        
                                        // 绘制垂直网格线
                                        for (var i = 0; i <= 5; i++) {
                                            var x = width * i / 5
                                            ctx.beginPath()
                                            ctx.moveTo(x, 0)
                                            ctx.lineTo(x, height)
                                            ctx.stroke()
                                        }
                                        
                                        if (!chartData || chartData.length === 0) return
                                        
                                        // X和Y轴范围：0-100
                                        var padding = 20
                                        var plotWidth = width - padding * 2
                                        var plotHeight = height - padding * 2
                                        
                                        ctx.fillStyle = "#2196F3"
                                        for (var i = 0; i < chartData.length; i++) {
                                            var point = chartData[i]
                                            // 确保point是对象，有x和y属性
                                            if (!point || typeof point !== "object") continue
                                            if (typeof point.x === "undefined" || typeof point.y === "undefined") continue
                                            var x = padding + (point.x / 100) * plotWidth
                                            var y = padding + plotHeight - (point.y / 100) * plotHeight
                                            
                                            ctx.beginPath()
                                            ctx.arc(x, y, 5, 0, 2 * Math.PI)
                                            ctx.fill()
                                        }
                                        
                                        // 绘制坐标轴
                                        drawAxes(ctx, width, height, padding, plotWidth, plotHeight, "scatter")
                                    }
                                    
                                    function drawAreaChart(ctx, width, height) {
                                        // 绘制网格线
                                        ctx.strokeStyle = "#E0E0E0"
                                        ctx.lineWidth = 1
                                        for (var i = 0; i <= 5; i++) {
                                            var y = height * i / 5
                                            ctx.beginPath()
                                            ctx.moveTo(0, y)
                                            ctx.lineTo(width, y)
                                            ctx.stroke()
                                        }
                                        
                                        if (!chartData || chartData.length === 0) return
                                        
                                        // X轴范围：0-100，Y轴范围：0-100
                                        var padding = 20
                                        var plotWidth = width - padding * 2
                                        var plotHeight = height - padding * 2
                                        
                                        // 计算所有点的坐标
                                        var points = []
                                        for (var i = 0; i < chartData.length; i++) {
                                            var point = chartData[i]
                                            if (!point || typeof point !== "object") continue
                                            if (typeof point.x === "undefined" || typeof point.y === "undefined") continue
                                            points.push({
                                                x: padding + (point.x / 100) * plotWidth,
                                                y: padding + plotHeight - (point.y / 100) * plotHeight
                                            })
                                        }
                                        if (points.length === 0) return
                                        
                                        // 绘制填充区域（upperSeries到lowerSeries，lowerSeries是0）
                                        ctx.fillStyle = "rgba(33, 150, 243, 0.3)"
                                        ctx.beginPath()
                                        var bottomY = padding + plotHeight
                                        ctx.moveTo(points[0].x, bottomY)
                                        
                                        // 使用平滑曲线绘制填充区域
                                        for (var i = 0; i < points.length - 1; i++) {
                                            var p0 = i > 0 ? points[i - 1] : points[i]
                                            var p1 = points[i]
                                            var p2 = points[i + 1]
                                            var p3 = i < points.length - 2 ? points[i + 2] : points[i + 1]
                                            
                                            // Catmull-Rom样条插值
                                            for (var t = 0; t <= 1; t += 0.1) {
                                                var t2 = t * t
                                                var t3 = t2 * t
                                                
                                                var x = 0.5 * ((2 * p1.x) +
                                                               (-p0.x + p2.x) * t +
                                                               (2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 +
                                                               (-p0.x + 3 * p1.x - 3 * p2.x + p3.x) * t3)
                                                
                                                var y = 0.5 * ((2 * p1.y) +
                                                               (-p0.y + p2.y) * t +
                                                               (2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 +
                                                               (-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t3)
                                                
                                                ctx.lineTo(x, y)
                                            }
                                        }
                                        
                                        ctx.lineTo(points[points.length - 1].x, bottomY)
                                        ctx.closePath()
                                        ctx.fill()
                                        
                                        // 绘制upperSeries平滑曲线
                                        ctx.strokeStyle = "#2196F3"
                                        ctx.lineWidth = 2
                                        ctx.beginPath()
                                        
                                        if (points.length > 0) {
                                            ctx.moveTo(points[0].x, points[0].y)
                                            
                                            for (var i = 0; i < points.length - 1; i++) {
                                                var p0 = i > 0 ? points[i - 1] : points[i]
                                                var p1 = points[i]
                                                var p2 = points[i + 1]
                                                var p3 = i < points.length - 2 ? points[i + 2] : points[i + 1]
                                                
                                                // Catmull-Rom样条插值
                                                for (var t = 0; t <= 1; t += 0.1) {
                                                    var t2 = t * t
                                                    var t3 = t2 * t
                                                    
                                                    var x = 0.5 * ((2 * p1.x) +
                                                                   (-p0.x + p2.x) * t +
                                                                   (2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 +
                                                                   (-p0.x + 3 * p1.x - 3 * p2.x + p3.x) * t3)
                                                    
                                                    var y = 0.5 * ((2 * p1.y) +
                                                                   (-p0.y + p2.y) * t +
                                                                   (2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 +
                                                                   (-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t3)
                                                    
                                                    ctx.lineTo(x, y)
                                                }
                                            }
                                        }
                                        ctx.stroke()
                                        
                                        // 绘制散点（和原实现一样）
                                        ctx.fillStyle = "#2196F3"
                                        for (var i = 0; i < points.length; i++) {
                                            ctx.beginPath()
                                            ctx.arc(points[i].x, points[i].y, 4, 0, 2 * Math.PI)
                                            ctx.fill()
                                        }
                                        
                                        // 绘制坐标轴
                                        drawAxes(ctx, width, height, padding, plotWidth, plotHeight, "area")
                                    }
                                    
                                    function drawRadarChart(ctx, width, height) {
                                        var centerX = width / 2
                                        var centerY = height / 2
                                        var radius = Math.min(width, height) / 2 - 30
                                        
                                        if (!chartData || chartData.length === 0) return
                                        
                                        // Y轴范围：0-100
                                        var maxValue = 100
                                        
                                        // 绘制网格圆
                                        ctx.strokeStyle = "#E0E0E0"
                                        ctx.lineWidth = 1
                                        for (var r = 0.2; r <= 1; r += 0.2) {
                                            ctx.beginPath()
                                            ctx.arc(centerX, centerY, radius * r, 0, 2 * Math.PI)
                                            ctx.stroke()
                                        }
                                        
                                        // 绘制数据区域（X轴是角度：i*60度）
                                        ctx.fillStyle = "rgba(33, 150, 243, 0.3)"
                                        ctx.strokeStyle = "#2196F3"
                                        ctx.lineWidth = 2
                                        ctx.beginPath()
                                        var hasValidPoint = false
                                        for (var i = 0; i < chartData.length; i++) {
                                            var point = chartData[i]
                                            if (!point || typeof point !== "object") continue
                                            if (typeof point.x === "undefined" || typeof point.y === "undefined") continue
                                            // X轴是角度（0, 60, 120, 180, 240, 300度）
                                            var angle = (point.x * Math.PI / 180) - Math.PI / 2
                                            var r = (point.y / maxValue) * radius
                                            var x = centerX + Math.cos(angle) * r
                                            var y = centerY + Math.sin(angle) * r
                                            if (!hasValidPoint) {
                                                ctx.moveTo(x, y)
                                                hasValidPoint = true
                                            } else {
                                                ctx.lineTo(x, y)
                                            }
                                        }
                                        if (!hasValidPoint) return
                                        ctx.closePath()
                                        ctx.fill()
                                        ctx.stroke()
                                    }
                                    
                                    function drawHeatMapChart(ctx, width, height) {
                                        if (!chartData || chartData.length === 0) return
                                        
                                        var cols = 5
                                        var rows = Math.ceil(chartData.length / cols)
                                        var cellWidth = (width - 20) / cols
                                        var cellHeight = (height - 20) / rows
                                        
                                        // 计算最大值，确保安全
                                        var maxValue = 0
                                        for (var j = 0; j < chartData.length; j++) {
                                            var val = chartData[j]
                                            if (typeof val === "number" && val > maxValue) {
                                                maxValue = val
                                            }
                                        }
                                        if (maxValue === 0) maxValue = 1  // 避免除零
                                        
                                        for (var i = 0; i < chartData.length; i++) {
                                            var value = chartData[i]
                                            if (typeof value !== "number") continue
                                            var row = Math.floor(i / cols)
                                            var col = i % cols
                                            var x = 10 + col * cellWidth
                                            var y = 10 + row * cellHeight
                                            
                                            // 根据值计算颜色强度
                                            var intensity = value / maxValue
                                            var r = Math.floor(33 + intensity * 222)  // 33-255
                                            var g = Math.floor(150 - intensity * 100)  // 150-50
                                            var b = Math.floor(243 - intensity * 100)  // 243-143
                                            
                                            ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")"
                                            ctx.fillRect(x + 2, y + 2, cellWidth - 4, cellHeight - 4)
                                        }
                                    }
                                    
                                    function drawDynamicChart(ctx, width, height) {
                                        // 绘制网格线
                                        ctx.strokeStyle = "#E0E0E0"
                                        ctx.lineWidth = 1
                                        for (var i = 0; i <= 5; i++) {
                                            var y = height * i / 5
                                            ctx.beginPath()
                                            ctx.moveTo(0, y)
                                            ctx.lineTo(width, y)
                                            ctx.stroke()
                                        }
                                        
                                        if (dataPoints.length === 0) return
                                        
                                        // X轴范围：0-100，Y轴范围：0-100
                                        var padding = 25
                                        var plotWidth = width - padding * 2
                                        var plotHeight = height - padding * 2
                                        
                                        // 计算X轴位置（动态调整）
                                        var dx = 100 / 10
                                        var less = 10 - dataPoints.length
                                        
                                        // 计算所有点的坐标
                                        var points = []
                                        for (var i = 0; i < dataPoints.length; i++) {
                                            points.push({
                                                x: padding + ((less * dx + i * dx) / 100) * plotWidth,
                                                y: padding + plotHeight - (dataPoints[i] / 100) * plotHeight
                                            })
                                        }
                                        
                                        // 绘制平滑曲线（SplineSeries）
                                        ctx.strokeStyle = "#2196F3"
                                        ctx.lineWidth = 2
                                        ctx.beginPath()
                                        
                                        if (points.length > 0) {
                                            ctx.moveTo(points[0].x, points[0].y)
                                            
                                            for (var i = 0; i < points.length - 1; i++) {
                                                var p0 = i > 0 ? points[i - 1] : points[i]
                                                var p1 = points[i]
                                                var p2 = points[i + 1]
                                                var p3 = i < points.length - 2 ? points[i + 2] : points[i + 1]
                                                
                                                // Catmull-Rom样条插值
                                                for (var t = 0; t <= 1; t += 0.1) {
                                                    var t2 = t * t
                                                    var t3 = t2 * t
                                                    
                                                    var x = 0.5 * ((2 * p1.x) +
                                                                   (-p0.x + p2.x) * t +
                                                                   (2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 +
                                                                   (-p0.x + 3 * p1.x - 3 * p2.x + p3.x) * t3)
                                                    
                                                    var y = 0.5 * ((2 * p1.y) +
                                                                   (-p0.y + p2.y) * t +
                                                                   (2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 +
                                                                   (-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t3)
                                                    
                                                    ctx.lineTo(x, y)
                                                }
                                            }
                                        }
                                        ctx.stroke()
                                        
                                        // 绘制散点
                                        ctx.fillStyle = "#2196F3"
                                        for (var i = 0; i < points.length; i++) {
                                            ctx.beginPath()
                                            ctx.arc(points[i].x, points[i].y, 4, 0, 2 * Math.PI)
                                            ctx.fill()
                                        }
                                        
                                        // 绘制坐标轴
                                        drawAxes(ctx, width, height, padding, plotWidth, plotHeight, "dynamic")
                                    }
                                    
                                    Timer {
                                        interval: 1000
                                        running: chartType === "dynamic"
                                        repeat: true
                                        onTriggered: {
                                            // 添加新数据点
                                            var newValue = Math.random() * 100
                                            dataPoints.push(newValue)
                                            
                                            // 限制最大点数
                                            if (dataPoints.length > maxPoints) {
                                                dataPoints.shift()
                                            }
                                            
                                            requestPaint()
                                        }
                                    }
                                    
                                    Component.onCompleted: {
                                        if (chartType === "dynamic") {
                                            // 初始化动态图表数据
                                            for (var i = 0; i < 5; i++) {
                                                dataPoints.push(Math.random() * 100)
                                            }
                                        }
                                        requestPaint()
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
